import React, { Component } from 'react';
import { good_goodinfo } from "../api/index";
import MySwiper from '../components/MySwiper';
import GoodsAction from "../components/GoodsAction";
import { NavBar,Skeleton } from "antd-mobile";
class shopcart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            bannerlist: [],
            id: ''
        }
    }
    componentDidMount() {
        // console.log(this.props.match.params.id);
        good_goodinfo({
            goodid: this.props.match.params.id
        }).then((res) => {
            console.log(res.data.goodinfo);
            this.state.id = res.data.goodinfo.id
            console.log('this.id' + this.id);
            this.setState({
                list: res.data.goodinfo,
                bannerlist: res.data.goodinfo.pics
            })
        })
    }
    back() {
        this.props.history.go(-1)
    }
    
    render() {
        // console.log("this.state.id" + this.state.id);
        return (
            <div className='shoplist'>
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                {/* 轮播图 */}
                {
                    this.state.bannerlist &&
                        this.state.bannerlist.length ?
                        <>
                           <div className='swiper'>
                           <MySwiper swiperlist={this.state.bannerlist} />
                           </div>
                            <div className="name">
                                {this.state.list.brandEN} &nbsp;
                                {this.state.list.brand} &nbsp;
                                {this.state.list.name}
                            </div>
                            <div className="price">
                                ¥ {
                                    this.state.list.salesPrice ?
                                        this.state.list.salesPrice.value : 0
                                }
                            </div>
                        </> :
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={10} animated />
                        </>
                }


                <GoodsAction id={this.state.id} />
            </div>
        );
    }
}

export default shopcart;